<template>
  <div>
    <!-- {{ echartData }} -->
    <div :id="'myChart'" :style="{width: '100%', height: '300px'}"/>
  </div>
</template>
<script>
// var colors = ['#409EFF', '#67C23A', '#675bba'];
var colors = ['#333', '#333', '#675bba'];

// var times = [
//   ['2012-05-11 18:22:19', 1, 90.00],
//   ['2012-05-13 18:22:19', 1, 70.00],
//   ['2012-10-11 18:22:19', 1, 0.02],
//   ['2019-08-10 18:22:19', 1, 0.02],
//   ['2019-08-14 18:22:19', 1, 2001],
//   ['2019-08-16 18:22:19', 1, 0.04],
//   ['2019-08-17 18:22:19', 1, 30.00],
//   ['2020-01-11 14:22:22', 1, 0.02],
//   ['2020-01-11 18:22:19', 18, 38.55],
//   ['2020-04-11 18:22:19', 1, 0.03],
//   ['2020-04-12 18:22:19', 1, 0.01],
//   ['2020-04-13 18:22:19', 1, 20.00],
//   ['2020-04-14 18:22:19', 1, 68.00],
//   ['2020-04-20 18:22:19', 1, 0.01],
//   ['2020-04-23 16:13:36', 4, 132.00],
//   ['2020-04-29 16:13:36', 2, 136.01],
//   ['2020-05-03 16:13:36', 2, 98.00],
//   ['2020-05-09 16:13:36', 2, 299.06],
//   ['2020-05-11 18:22:19', 1, 5.01],
//   ['2020-05-13 16:13:36', 1, 28.00],
//   ['2020-05-20 16:13:36', 1, 6.00],
//   ['2020-05-23 17:25:25', 4, 664.40],
//   ['2020-06-23 13:09:32', 2, 336.00],
//   ['2020-06-24 10:02:53', 1, 0.01],
//   ['2020-06-24 14:18:10', 1, 0.03],
//   ['2020-06-24 15:57:49', 1, 0.01],
//   ['2020-06-24 19:37:35', 1, 0.01],
//   ['2020-06-28 14:12:49', 1, 0.01],
//   ['2020-06-29 18:27:03', 1, 0.01],
//   ['2020-07-03 12:07:16', 1, 0.10],
//   ['2020-07-17 15:47:34', 1, 0.01],
//   ['2020-07-19 17:29:13', 1, 0.01],
//   ['2020-07-19 17:29:14', 1, 0.01],
//   ['2020-07-20 15:46:35', 1, 0.02],
//   ['2020-07-21 09:53:27', 1, 0.01],
//   ['2020-07-23 09:20:36', 29, 7.30]
// ]
// var times = [[1522306819000, 200], [1522306919000, 1000], [1522307019000, 388], [1522307119000, 1300], [1522307120000, 1900], [1522307230000, 1000], [1522302230000, 1], [1522307430000, 1334], [1522407230000, 1223]];
export default {
  name: 'Dashboard',
  props: {
    echartData: {
      type: Array,
      required: true
    }
  },
  // components: { ECharts },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    //   dataX: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
    //   quantity: [120, 132, 101, 134, 190, 230, 210, 120, 330, 101, 134, 190],
    //   amount: [220, 182, 191, 114, 290, 330, 220, 182, 540, 234, 290, 330]
    }
  },
  computed: {
  },
  watch: {
    echartData() {
      this.$nextTick(() => {
        if (this.echartData) {
          this.quantity = this.formatDate(this.echartData).quantityArr
          this.amount = this.formatDate(this.echartData).amountArr
          this.init()
        }
      })
    }
  },
  mounted() {
    this.init();
    this.quantity = this.formatDate(this.echartData).quantityArr
    this.amount = this.formatDate(this.echartData).amountArr
    console.log(this.quantity)
    console.log(this.amount)
  },
  methods: {
    formatDate(times) {
      const quantityArr = []
      const amountArr = []
      for (let i = 0; i < times.length; i++) {
        quantityArr.push([times[i][0], times[i][2]])
        amountArr.push([times[i][0], times[i][1]])
      }
      return {
        quantityArr, amountArr
      }
    },
    submitForm() {
      console.log(1111)
    },
    init() {
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
        //   title: {
        //     text: '2020年订单数量' + this.total1 + '元2020年订单数量2020年订单数量2020年订单数量',
        //     textAlign: '',
        //     textStyle: {
        //       fontSize: 12
        //     }
        //   },
          toolbox: {
            feature: {
              dataView: { show: false, readOnly: false },
              restore: { show: false },
              saveAsImage: { show: false }
            }
          },
          legend: {
            data: ['item1', 'item2', 'item3'],
            bottom: 0
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'time',
            boundaryGap: false
            // data: this.echartData.dataX
          },
          yAxis: [
            {
              type: 'value',
              name: '(金额)',
              min: 0,
              position: 'left',
              offset: 0,
              axisLine: {
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel: {
                formatter: '{value} 元'
              }
            },
            {
              type: 'value',
              name: '(订单)',
              min: 0,
              position: 'right',
              offset: 0,
              splitLine: {
                show: false,
                lineStyle: {
                  type: 'dashed'
                }
              },
              axisLine: {
                lineStyle: {
                  color: colors[1]
                }
              },
              axisLabel: {
                formatter: '{value} 单'
              }
            }

          ],
          series: [
            {
              name: '订单总额',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {
                  color: '#53DF41' // 改变区域颜色
                }
              },
              itemStyle: {
                normal: {
                  color: 'green', // 改变折线点的颜色
                  lineStyle: {
                    color: 'green' // 改变折线颜色
                  }
                }
              },
              data: this.quantity
            },
            {
              name: '订单数量',
              type: 'line',
              stack: '数量',
              yAxisIndex: 1,
              areaStyle: {
                normal: {
                  color: '#CBEDFF' // 改变区域颜色
                }
              },
              itemStyle: {
                normal: {
                  color: '#09c', // 改变折线点的颜色
                  lineStyle: {
                    color: '#09c' // 改变折线颜色
                  }
                }
              },

              data: this.amount
            }
          ]
        });
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.echartsBox{
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    .top {
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
        .title{
            padding-left: 10px;
            float: left;
            font-size: 14px;
        }
        .edit{
            padding-right: 10px;
            float: right;
            font-size: 12px;
        }
    }
    .content{
        padding-bottom:10px;
        position: relative;
        .echartsTitle {
            font-size: 14px;
            position: absolute;
            right: 140px;
            top: 0;
        }
    }
}
</style>
